import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

const dataChart = [20, 40, 60, 30, 70];
const getOption = (title) => ({
  grid: {
    // 直角坐标系内绘图网格
    left: '5%', // grid 组件离容器左侧的距离,
    // left的值可以是80这样具体像素值，
    // 也可以是'80%'这样相对于容器高度的百分比
    top: '40',
    right: '5%',
    bottom: '20',
    containLabel: true, // gid区域是否包含坐标轴的刻度标签。为true的时候，
    // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
    // 所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
  },
  xAxis: {
    // 直角坐标系grid中的x轴,
    // 一般情况下单个grid组件最多只能放上下两个x轴,
    // 多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
    type: 'value', // 坐标轴类型,分别有：
    // 'value'-数值轴；'category'-类目轴;
    // 'time'-时间轴;'log'-对数轴
    splitLine: { show: false }, // 坐标轴在 grid 区域中的分隔线
    axisLabel: { show: false }, // 坐标轴刻度标签
    axisTick: { show: false }, // 坐标轴刻度
    axisLine: { show: false }, // 坐标轴轴线
  },
  yAxis: {
    type: 'category',
    axisTick: { show: false },
    axisLine: { show: false },
    axisLabel: {
      color: 'block',
      // fontSize: 16,
      // fontWeight: 700,
    },
    data: ['中低端', '中高端', '高端', '超高端', '总销量'], // 类目数据，在类目轴（type: 'category'）中有效。
    // 如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
  },
  series: [
    // 系列列表。每个系列通过 type 决定自己的图表类型
    {
      name: '实际', // 系列名称
      type: 'bar', // 柱状、条形图
      barWidth: 12, // 柱条的宽度,默认自适应
      data: dataChart.map((item) => ({
        value: item,
      })),
      label: {
        show: true,
        position: 'outside',
        align: 'center',
        offset: [10, -20],
        formatter: '{a}{c}',
      },
      itemStyle: {
        // 图形样式
        normal: {
          // normal 图形在默认状态下的样式;
          // emphasis图形在高亮状态下的样式
          barBorderRadius: 10, // 柱条圆角半径,单位px.
        },
      },
      zlevel: 1, // 柱状图所有图形的 zlevel 值,
      // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
    },
    {
      name: title === '1' ? '达成率' : '同比', // 系列名称
      type: 'bar', // 柱状、条形图
      barWidth: 12, // 柱条的宽度,默认自适应
      data: [20, 40, 60, 30, 70], // 系列中数据内容数组
      color: 'rgb(206, 14, 45)', // 柱条颜色
      label: {
        // 图形上的文本标签
        show: true,
        position: 'left', // 标签的位置
        offset: [60, -20], // 标签文字的偏移，此处表示向上偏移40
        formatter: '{a}{c}%', // 标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
        // color: 'black',//标签字体颜色
        // fontSize: 36  //标签字号
      },
      itemStyle: {
        // 图形样式
        normal: {
          // normal 图形在默认状态下的样式;
          // emphasis图形在高亮状态下的样式
          barBorderRadius: 10, // 柱条圆角半径,单位px.
        },
      },
      zlevel: 1, // 柱状图所有图形的 zlevel 值,
      // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
    },
    {
      name: title === '1' ? '目标' : '同期',
      type: 'bar',
      label: {
        show: true,
        position: 'right',
        offset: [-50, -20],
        formatter: '{a}{c}',
      },
      barGap: '-100%', // 不同系列的柱间距离，为百分比。
      // 在同一坐标系上，此属性会被多个 'bar' 系列共享。
      // 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
      // 并且是对此坐标系中所有 'bar' 系列生效。
      barWidth: 12,
      data: [100, 100, 100, 100, 100],
      color: '#eeee', // 柱条颜色
      // gray
      itemStyle: {
        normal: {
          barBorderRadius: 10,
        },
      },
    },
  ],
});

export const ImportEcharts = (props) => {
  const chartRef = useRef(null);
  const { getCount, title } = props;
  useEffect(() => {
    const chartDom = chartRef.current;
    const myChart = echarts.init(chartDom);
    myChart.clear();
    const option = getOption(title);
    myChart.setOption(option);
    myChart.on('click', function (params) {
      getCount(params.name);
    });
    return () => {
      myChart.dispose(); // 在组件卸载时清理echarts实例
    };
  }, []);

  return (
    <div>
      <div ref={chartRef} style={{ height: '260px' }} />
    </div>
  );
};
